import React, { useEffect, useImperativeHandle, forwardRef } from 'react'
import { Form } from 'antd';
var FormContent = (props: any, ref: any): any=> {
  const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 },
  };
  const [form] = Form.useForm()
  useEffect(() => {
    Object.keys(props.sentForm).forEach(key=>{
      form.setFieldsValue({key: props.sentForm[key]})
    })
  },[])
  useImperativeHandle(ref, ()=>{
    return form
  }, [form])
  return (
    <>
      <Form
        {...layout}
        name="basic"
        form={form}
        initialValues={props.sentForm}
      >
        {
          props.formVal.map(((val: any)=>{
            return <Form.Item
              label={val.label}
              name={val.name}
              rules={val.rules}
              key={val.name}
            >
              {val.render}
            </Form.Item>
          }))
        }   
      </Form>
    </>

  )
}
FormContent = forwardRef(FormContent);
export default FormContent